<template>
	<view class="body-container">
		<view class="box">
			<view class="title">
				不适症状
			</view>
			<view class="content">
				<view class="img">
					<image src="https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/1.jpg" mode="aspectFill">
					</image>
				</view>

				<view class="event" v-for="(item,i) in symptom" :key="i">
					<view class="name">
						{{item.name}}
					</view>
					<view class="time">
						<uni-dateformat :date="item.time" format="MM/dd hh:mm"></uni-dateformat>
					</view>
					<view class="showBtn">
						查看
					</view>
				</view>

				<view class="btn">
					<button type="default" @click="toOptions('symptom/symptom')">新增不适症状</button>
				</view>
			</view>
		</view>

		<view class="box blood">
			<view class="title">
				出血事件
			</view>
			<view class="content">
				<view class="img">
					<image src="https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/2.jpg" mode="aspectFill">
					</image>
				</view>
				<view class="event" v-for="(item,i) in blood" :key="i">
					<view class="name">
						{{item.name}}
					</view>
					<view class="time">
						<uni-dateformat :date="item.time" format="MM/dd hh:mm"></uni-dateformat>
					</view>
					<view class="showBtn">
						查看
					</view>
				</view>
				<view class="btn">
					<button type="default" @click="toOptions('blood/blood')">新增出血事件</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {};
		},
		methods: {
			toOptions(url) {
				uni.navigateTo({
					url
				})
			}
		},
		computed: {
			...mapState('health', [
				'symptom', 'blood',
			])
		},
	}
</script>

<style lang="less">
	.body-container {
		padding: 40rpx;
		background-color: rgb(241, 247, 247);
		height: 100vh;

		.box {
			margin-bottom: 40rpx;
			border-radius: 8px;
			box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

			.title {
				background-color: rgb(106, 212, 192);
				text-align: center;
				font-size: 40rpx;
				font-weight: 700;
				line-height: 70rpx;
				color: white;
			}

			.content {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				background-color: white;

				.img {
					image {
						width: 150rpx;
						height: 150rpx;
						padding: 30rpx 0;
					}
				}

				.event {
					display: flex;
					width: 600rpx;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20rpx;
					border-bottom: 2px solid #CCCCCC;
					margin-bottom: 40rpx;

					.name {
						height: 120rpx;
						line-height: 120rpx;
						font-size: 38rpx;
						border-right: 2px solid #CCCCCC;
						padding-right: 30rpx;
					}

					.showBtn {
						background-color: #dbf8fe;
						padding: 20rpx;
						border: 2px solid #76b3b5;
					}
				}

				.btn {
					width: 80%;
					line-height: 80rpx;
					background-color: rgb(248, 248, 248);
					border: 1px solid #CCCCCC;
					border-radius: 10rpx;
					font-size: 40rpx;
					font-weight: 500;
					text-align: center;
					margin-bottom: 40rpx;
				}
			}
		}

		.blood {

			.title {
				background-color: rgb(210, 86, 138);
			}

		}
	}
</style>
